/*
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2025-04-02 14:46:35
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2025-04-23 16:01:38
 * @FilePath: \react-demo\src\App.js
 */
import React, { Component } from "react";
import { Link, NavLink, Routes, Route ,Redirect} from "react-router-dom";

import Home from "./pages/Home";
import About from "./pages/About";
import Test from "./pages/Test";
import MyNavLink from "./components/MyNavLink";
export default class App extends Component {
  render() {
    return (
      <div style={{ height: "800px" }}>
        <div style={{ width: "80%", height: "100%", margin: "0 auto" }}>
          <br />
          <div>
            <h1>React Router Web</h1>
          </div>
          <div style={{ display: "flex" }}>
            <div style={{ width: "150px" }}>
              <MyNavLink to="/about" children={"about"}></MyNavLink>
              <MyNavLink to="/home">Home</MyNavLink>
            </div>
            <div
              style={{
                flex: "1",
                border: "1px solid #ccc",
                height: "500px",
                padding: "10px",
              }}
            >
              <Routes>
                <Route path="/about" element={<About />} />
                <Route path="/home/*" element={<Home />} />
              </Routes>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
